<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
<!--    <link rel="stylesheet" href="./layui/css/layui.css">-->
<!--    <script src="./layui/layui.js" type="text/javascript"></script>-->
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js" type="text/javascript"></script>
    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                console.log(data);
                return ;
            });
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            /*margin-top: 500px;*/
            width: 335px;
            height: 410px;
            border-radius: 15px;
            padding: 20px 50px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .input-item {
            margin-left: 50px;
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item::placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>

</head>

<body class="container">
    <form class="layui-form layui-form-pane" action="/account/login" style="margin-left: 470px">
        <div class="login-wrapper">
            <div class="layui-font-green layui-font-20 layui-text layui-form-item" style="margin-left: 100px">管理员登陆界面</div>
            <!--        //用户名-->
            <div class="layui-form-item">
<!--                <label class="layui-form-label">用户名:</label>-->
                <div class="layui-input-inline" style="width: 215px">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="input-item">
                </div>
            </div>
            <!--        //密码-->
            <div class="layui-form-item">
<!--                <label class="layui-form-label">密码框:</label>-->
                <div class="layui-input-inline" style="width: 215px">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="input-item">
                </div>
            </div>
            <!--        //手机号-->
            <div class="layui-form-item">
<!--                <label class="layui-form-label">手机号:</label>-->
                <div class="layui-input-inline" style="width: 215px">
                    <input type="text" name="username" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="input-item">
                </div>
            </div>
            <!--        //验证码-->
            <div class="layui-form-item">
<!--                <label class="layui-form-label">验证码:</label>-->
                <div class="layui-input-inline" style="width: 110px">
                    <input type="text" name="checkcode" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="input-item">
                </div>
                <div ><a style="margin-left: 70px" href="#" class="layui-btn">点击获取</a></div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div style="margin-left: -50px">
                        <button type="submit" class="layui-btn layui-btn-radius" lay-submit lay-filter="*">登陆</button>
                        <button type="reset" class="layui-btn layui-btn-radius" style="margin-left: 80px">重置</button>
                    </div>
                </div>
            </div>
            <div class="msg" style="line-height: 20px">
                没有账号?<a href="#">点击注册</a>
            </div>
        </div>
    </form>
</body>
</html>